<template>
  <div id="div">
    <ul ref="ul">
      <li v-for="item in itemdata" @click="dianji(item)" :key="item.id">
        <span>{{ item.title }}</span>
        <p>{{ item.data.substring(0, 10) }}</p>
      </li>
    </ul>
    <div class="winhtml"><div ref="chuangti"></div></div>
  </div>
</template>

<script>
export default {
  name: "tran",
  data() {
    return {
      itemdata: [],
    };
  },

  methods: {
    tranlist(name) {
      this.axios({
        method: "post",
        url: "api/users/gain",
        data: {
          item: name,
        },
      }).then((res) => {
        this.itemdata = res.data;
        this.$refs.chuangti.innerHTML = this.itemdata[0].html;
      });
    },
    dianji(item) {
      this.$refs.chuangti.innerHTML = item.html;
    },
    status(sts){
    this.$refs.ul.style.display= sts
    }
  },
};
</script>


<style scoped>
* {
  font-family: "Fantasy";
}
@media (max-width: 910px) {
  ul {
    display: none;
    position: absolute;
    z-index: 999;
    right: 5px;
    width: 50% !important;
    background-color: #00000090;
  }
  ul li {
    width: auto;
    height: auto;
  }
  ul span {
    font-size: 20px;

    line-height: 20px !important;
    color: white !important;
  }
  .winhtml {
    position: absolute;
    width: 85% !important;
    border: 0px !important;
  }
}
#div {
  position: absolute;
  top: 0;
  bottom: 1px;
  height: auto;
  width: 100%;
}

ul {
  height: 99%;
  width: 30%;

  margin-left: 20px;
  border: 3px #ffffff solid;
  border-radius: 10px;
  overflow: scroll;
}

ul::-webkit-scrollbar {
  display: none;
}
li {
  width: auto;
  height: auto;
  font-size: 25px;
  padding: 9px;
  background-color: #ffffff50;
  border-radius: 2px;
  border: 1px #eedbe5 solid;
}
li:hover {
  border: 2px #b2eae9 solid;
  background-color: #ffffff;
}
li span {
  margin: 10px;
  color: rgb(102, 88, 88);
  line-height: 150%;
}
li p {
  margin-left: 10px;
  color: rgb(102, 88, 88);
  font-size: 10px;
}

.winhtml {
  position: absolute;
  right: 5%;
  top: 5%;
  width: 60%;
  height: 90%;
  border: 3px #eedbe5 solid;
  border-radius: 10px;
  overflow: scroll;
}
.winhtml::-webkit-scrollbar {
  display: none;
}
.winhtml div {
  font-size: 20px;
  margin: 10px;
}
</style>